<template>
  <div>
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="serviceForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item prop="buCode">
          <Select
            :disabled="buCode !== 'CRC'"
            style="width: 100%;"
            filterable
            clearable
            v-model="searchForm.buCode"
            placeholder="请选择业务单元"
            @on-change="searchValueSet"
          >
            <Option v-for="item in filterBuList" :value="item.key" :key="item.key">{{ item.value }}</Option>
          </Select>
          <!-- <Input v-else v-model="userBu" :disabled="true" :maxlength="300" :rows="1" placeholder="请输入" /> -->
        </Form-item>
        <Form-item prop="dcPeriod">
          <Select
            style="width: 100%;"
            filterable
            clearable
            v-model="searchForm.dcPeriod"
            placeholder="请选择季度"
            @on-change="searchValueSet"
          >
            <Option v-for="item in quarterList" :value="item.value" :key="item.value">{{ item.value }}</Option>
          </Select>
        </Form-item>
        <!-- 查询 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" @click="searchValueSet()" />
          <RPButton optType="reset" @click="resetAndSearchValueSet()" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable class="table" ref="valueSetTable" :config="pageTableConfig"> </InnerPageTable>
  </div>
</template>

<script>
import cover2Api from '@/api/cover2'
import { coverPageColumn } from './columns'
import pageDetail from './pageDetail.vue'
import coverApi from '@/api/cover'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      filterBuList: [],
      searchForm: {
        dcPeriod: '',
        buCode: ''
      },
      pageTableConfig: {
        columns: coverPageColumn.bind(this)(),
        loadDataFn: this.getServiceList,
        rowClickHandle: this.onRowClick
      }
    }
  },
  computed: {
    ...mapState(['quarterList', 'buList', 'writeablePeriod']),
    buCode() {
      return this.$store.state.userBu.key
    }
  },
  mounted() {
    if (this.writeablePeriod) {
      this.searchForm.dcPeriod = this.writeablePeriod
    } else {
      this.searchForm.dcPeriod = this.quarterList[0].value
    }
    if (this.buCode == 'CRC') {
      this.searchForm.buCode = ''
      // 不显示华润集团、集团总部两个选项
    } else {
      this.searchForm.buCode = this.buCode
    }
    this.filterBuList = this.buList.filter(item => item.key !== 'CRC' && item.key !== 'CR')
    this.searchValueSet()
  },
  methods: {
    onRowClick(row) {
      new this.$sidelipPage(pageDetail, {
        props: {
          dcPeriod: row.dcPeriod,
          rowbuCode: row.buCode,
          buList: this.filterBuList
        }
      })
    },
    resetAndSearchValueSet() {
      this.$refs['serviceForm'].resetFields()
      this.searchValueSet()
    },
    searchValueSet() {
      this.$refs['valueSetTable'].load(this.searchForm)
    },
    getServiceList(tableObj) {
      let { responseProcess, param } = tableObj
      if (param.buCode === 'CR') {
        param.buCode = ''
        param.condition.buCode = ''
      }
      let params = {
        currentPage: param.pageNum,
        pageSize: param.pageSize,
        ...param
      }
      cover2Api.commonPage(params).then(res => {
        let { records, pages, size, total, current } = res.data
        responseProcess({
          pageNum: current,
          pageSize: size,
          pages: pages,
          records,
          total: total
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .single-table-con {
  padding: 0px 10px 0;
}

/deep/.self-adaption-wrap .self-adaption-flex {
  padding: 0 5px 5px;
  margin-bottom: 0;
}
</style>
